<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>eh documentation</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="icon" type="image/x-icon" href="../images/favicon.ico">
	      <link rel="stylesheet" href="../styles/style.css">
    </head>
    <body>

        <div class="navbar navbar-default navbar-fixed-top visible-xs">
            <a href="../" class="navbar-brand">eh documentation</a>
            <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
        </div>

        <div class="xs-menu menu" id="mobile-menu">
                <div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search">
</div>
            <compodoc-menu></compodoc-menu>
        </div>

        <div class="container-fluid main">
           <div class="row main">
               <div class="hidden-xs menu">
                   <compodoc-menu mode="normal"></compodoc-menu>
               </div>
               <!-- START CONTENT -->
               <div class="content component">
                   <div class="content-data">




<ol class="breadcrumb">
  <li>Components</li>
  <li>LoginComponent</li>
</ol>

<ul class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="#info" role="tab" id="info-tab" data-toggle="tab" data-link="info">Info</a>
        </li>
        <li >
            <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
        </li>
        <li >
            <a href="#templateData" role="tab" id="templateData-tab" data-toggle="tab" data-link="template">Template</a>
        </li>
        <li >
            <a href="#tree" role="tab" id="tree-tab" data-toggle="tab" data-link="dom-tree">DOM Tree</a>
        </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade active in" id="c-info"><p class="comment">
    <h3>File</h3>
</p>
<p class="comment">
    <code>src/app/user/cpt/login/login.component.ts</code>
</p>



    <p class="comment">
        <h3>Implements</h3>
    </p>
    <p class="comment">
                <code><a href="https://angular.io/api/core/OnInit" target="_blank" >OnInit</a></code>
                <code><a href="https://angular.io/api/core/DoCheck" target="_blank" >DoCheck</a></code>
    </p>


<section>
    <h3>Metadata</h3>
    <table class="table table-sm table-hover">
        <tbody>











            <tr>
                <td class="col-md-3">selector</td>
                <td class="col-md-9"><code>app-login</code></td>
            </tr>

            <tr>
                <td class="col-md-3">styleUrls</td>
                <td class="col-md-9"><code>login.component.scss</code></td>
            </tr>



            <tr>
                <td class="col-md-3">templateUrl</td>
                <td class="col-md-9"><code>./login.component.html</code></td>
            </tr>


        </tbody>
    </table>
</section>

    <section>
    <h3 id="index">Index</h3>
    <table class="table table-sm table-bordered index-table">
        <tbody>
                <tr>
                    <td class="col-md-4">
                        <h6><b>Properties</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#aim">aim</a>
                            </li>
                            <li>
                                <a href="#email">email</a>
                            </li>
                            <li>
                                <a href="#hide">hide</a>
                            </li>
                            <li>
                                <a href="#req">req</a>
                            </li>
                            <li>
                                <a href="#timer">timer</a>
                            </li>
                            <li>
                                <a href="#type">type</a>
                            </li>
                            <li>
                                <a href="#user$">user$</a>
                            </li>
                            <li>
                                <a href="#validateForm">validateForm</a>
                            </li>
                        </ul>
                    </td>
                </tr>

                <tr>
                    <td class="col-md-4">
                        <h6><b>Methods</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#addListen">addListen</a>
                            </li>
                            <li>
                                <a href="#debounce">debounce</a>
                            </li>
                            <li>
                                <a href="#ngDoCheck">ngDoCheck</a>
                            </li>
                            <li>
                                <a href="#ngOnInit">ngOnInit</a>
                            </li>
                            <li>
                                    <span class="modifier">Async</span>
                                <a href="#onLogin">onLogin</a>
                            </li>
                        </ul>
                    </td>
                </tr>



                <tr>
                    <td class="col-md-4">
                        <h6><b>HostBindings</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#style.align-items">style.align-items</a>
                            </li>
                            <li>
                                <a href="#style.display">style.display</a>
                            </li>
                            <li>
                                <a href="#style.height">style.height</a>
                            </li>
                        </ul>
                    </td>
                </tr>


        </tbody>
    </table>
</section>

    <section>
    <h3 id="constructor">Constructor</h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
<code>constructor(fb: <a href="https://angular.io/api/forms/FormBuilder" target="_blank">FormBuilder</a>, renderer: <a href="https://angular.io/api/core/Renderer2" target="_blank">Renderer2</a>, storeService: , nzMessageService: , regService: , utilsService: , userService: , hasUsernameValidatorService: , router: <a href="https://angular.io/api/router/Router" target="_blank">Router</a>, store: <a href="../interfaces/State.html">Store<fromUser.State></a>)</code>
                    </td>
                </tr>
                        <tr>
                            <td class="col-md-4">
                                <div class="io-line">Defined in <a href="" data-line="41" class="link-to-prism">src/app/user/cpt/login/login.component.ts:41</a></div>
                            </td>
                        </tr>

                <tr>
                    <td class="col-md-4">
                            <div>
                                    <b>Parameters :</b>
                                    <table class="params">
                                        <thead>
                                            <tr>
                                                <td>Name</td>
                                                    <td>Type</td>
                                                <td>Optional</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                                <tr>
                                                        <td>fb</td>
                                                  
                                                        <td>
                                                                    <code><a href="https://angular.io/api/forms/FormBuilder" target="_blank" >FormBuilder</a></code>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>renderer</td>
                                                  
                                                        <td>
                                                                    <code><a href="https://angular.io/api/core/Renderer2" target="_blank" >Renderer2</a></code>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>storeService</td>
                                                  
                                                        <td>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>nzMessageService</td>
                                                  
                                                        <td>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>regService</td>
                                                  
                                                        <td>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>utilsService</td>
                                                  
                                                        <td>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>userService</td>
                                                  
                                                        <td>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>hasUsernameValidatorService</td>
                                                  
                                                        <td>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>router</td>
                                                  
                                                        <td>
                                                                    <code><a href="https://angular.io/api/router/Router" target="_blank" >Router</a></code>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>store</td>
                                                  
                                                        <td>
                                                                    <code><a href="../interfaces/State.html" target="_self" >Store&lt;fromUser.State&gt;</a></code>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                        </tbody>
                                    </table>
                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
</section>



    <section>
    <h3>HostBindings</h3>        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="style.align-items"></a>
                        <span class="name">
                            <b>
                            style.align-items
                            </b>
                            <a href="#style.align-items"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>style.align-items:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>&#x27;center&#x27;</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/app/user/cpt/login/login.component.ts:22</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="style.display"></a>
                        <span class="name">
                            <b>
                            style.display
                            </b>
                            <a href="#style.display"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>style.display:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>&#x27;flex&#x27;</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="20" class="link-to-prism">src/app/user/cpt/login/login.component.ts:20</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="style.height"></a>
                        <span class="name">
                            <b>
                            style.height
                            </b>
                            <a href="#style.height"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>style.height:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>&#x27;100%&#x27;</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="18" class="link-to-prism">src/app/user/cpt/login/login.component.ts:18</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
</section>


    <section>
    
        <h3 id="methods">
            Methods
        </h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="addListen"></a>
                        <span class="name">
                            <b>
                            addListen
                            </b>
                            <a href="#addListen"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>addListen()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="91" class="link-to-prism">src/app/user/cpt/login/login.component.ts:91</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="debounce"></a>
                        <span class="name">
                            <b>
                            debounce
                            </b>
                            <a href="#debounce"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>debounce(fn: , time: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank">number</a>)</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="79" class="link-to-prism">src/app/user/cpt/login/login.component.ts:79</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                    <b>Parameters :</b>
                                    <table class="params">
                                        <thead>
                                            <tr>
                                                <td>Name</td>
                                                    <td>Type</td>
                                                <td>Optional</td>
                                                    <td>Default value</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                                <tr>
                                                        <td>fn</td>
                                                        <td>
                                                        </td>
                                                    
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                        <td>
                                                        </td>

                                                </tr>
                                                <tr>
                                                        <td>time</td>
                                                        <td>
                                                                    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
                                                        </td>
                                                    
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                        <td>
                                                                <code>1000</code>
                                                        </td>

                                                </tr>
                                        </tbody>
                                    </table>
                            </div>
                            <div>
                            </div>
                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                                <div class="io-description">
                                    
                                </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="ngDoCheck"></a>
                        <span class="name">
                            <b>
                            ngDoCheck
                            </b>
                            <a href="#ngDoCheck"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>ngDoCheck()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="89" class="link-to-prism">src/app/user/cpt/login/login.component.ts:89</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="ngOnInit"></a>
                        <span class="name">
                            <b>
                            ngOnInit
                            </b>
                            <a href="#ngOnInit"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>ngOnInit()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="62" class="link-to-prism">src/app/user/cpt/login/login.component.ts:62</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="onLogin"></a>
                        <span class="name">
                            <b>
                                <span class="modifier">Async</span>
                            onLogin
                            </b>
                            <a href="#onLogin"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                            <span class="modifier-icon icon ion-ios-reset"></span>
                        <code>onLogin()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/app/user/cpt/login/login.component.ts:93</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
</section>

    <section>
    
        <h3 id="inputs">
            Properties
        </h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="aim"></a>
                        <span class="name">
                            <b>
                            aim
                            </b>
                            <a href="#aim"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>aim:     <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>

                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>&#x27;&#x27;</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="38" class="link-to-prism">src/app/user/cpt/login/login.component.ts:38</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="email"></a>
                        <span class="name">
                            <b>
                            email
                            </b>
                            <a href="#email"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>email:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Decorators : </i><code>ViewChild</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="41" class="link-to-prism">src/app/user/cpt/login/login.component.ts:41</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="hide"></a>
                        <span class="name">
                            <b>
                            hide
                            </b>
                            <a href="#hide"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>hide:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>true</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="28" class="link-to-prism">src/app/user/cpt/login/login.component.ts:28</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="req"></a>
                        <span class="name">
                            <b>
                            req
                            </b>
                            <a href="#req"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>req:     <code><a href="../interfaces/ILoginRequest.html" target="_self" >ILoginRequest</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="../interfaces/ILoginRequest.html" target="_self" >ILoginRequest</a></code>

                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>{
    username: &#x27;&#x27;,
    password: &#x27;&#x27;,
    code: &#x27;&#x27;,
  }</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="56" class="link-to-prism">src/app/user/cpt/login/login.component.ts:56</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="timer"></a>
                        <span class="name">
                            <b>
                            timer
                            </b>
                            <a href="#timer"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>timer:     <code></code>
</code>
                    </td>
                </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="35" class="link-to-prism">src/app/user/cpt/login/login.component.ts:35</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="type"></a>
                        <span class="name">
                            <b>
                            type
                            </b>
                            <a href="#type"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>type:     <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object" target="_blank" >object</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object" target="_blank" >object</a></code>

                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>{
    email: &#x27;1&#x27;,
    phone: &#x27;2&#x27;,
  }</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/app/user/cpt/login/login.component.ts:30</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="user$"></a>
                        <span class="name">
                            <b>
                            user$
                            </b>
                            <a href="#user$"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>user$:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>this.store.pipe(select(fromUser.getUser))</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/app/user/cpt/login/login.component.ts:24</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="validateForm"></a>
                        <span class="name">
                            <b>
                            validateForm
                            </b>
                            <a href="#validateForm"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>validateForm:     <code><a href="https://angular.io/api/forms/FormGroup" target="_blank" >FormGroup</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="https://angular.io/api/forms/FormGroup" target="_blank" >FormGroup</a></code>

                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="26" class="link-to-prism">src/app/user/cpt/login/login.component.ts:26</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
</section>

</div>


    <div class="tab-pane fade  tab-source-code" id="c-source">
        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { HostBinding, Component, OnInit, ViewChild, Input, Renderer2, forwardRef, Injector, Inject, DoCheck } from &#x27;@angular/core&#x27;;
import { Observable, Subject, ReplaySubject, from, of, range } from &#x27;rxjs&#x27;;
import { map, catchError } from &#x27;rxjs/operators&#x27;;
import { Router } from &#x27;@angular/router&#x27;;
import { AsyncValidator, NG_ASYNC_VALIDATORS, ValidationErrors, AbstractControl, FormBuilder, FormGroup, Validators, ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl } from &#x27;@angular/forms&#x27;;
import { Store, select } from &#x27;@ngrx/store&#x27;;
import * as fromUser from &#x27;@/user/store/reducers/user.reducer&#x27;;
import { UserActions } from &#x27;@/user/store/actions&#x27;;
import { ILoginRequest } from &#x27;@/user/store/models/user&#x27;;

@Component({
  selector: &#x27;app-login&#x27;,
  templateUrl: &#x27;./login.component.html&#x27;,
  styleUrls: [&#x27;./login.component.scss&#x27;],
})
export class LoginComponent implements OnInit, DoCheck {
  @HostBinding(&#x27;style.height&#x27;)
  public height &#x3D; &#x27;100%&#x27;;
  @HostBinding(&#x27;style.display&#x27;)
  public display &#x3D; &#x27;flex&#x27;;
  @HostBinding(&#x27;style.align-items&#x27;)
  public alignItems &#x3D; &#x27;center&#x27;;

  user$ &#x3D; this.store.pipe(select(fromUser.getUser));

  validateForm: FormGroup;

  hide &#x3D; true;

  type &#x3D; {
    email: &#x27;1&#x27;,
    phone: &#x27;2&#x27;,
  };

  timer;

  // 发送目标
  aim &#x3D; &#x27;&#x27;;

  @ViewChild(&#x27;email&#x27;)
  email;

  constructor(
    private fb: FormBuilder,
    private renderer: Renderer2,
    @Inject(&#x27;StoreService&#x27;) private storeService,
    @Inject(&#x27;NzMessageService&#x27;) private nzMessageService,
    @Inject(&#x27;RegService&#x27;) private regService,
    @Inject(&#x27;UtilsService&#x27;) private utilsService,
    @Inject(&#x27;UserService&#x27;) private userService,
    @Inject(&#x27;HasUsernameValidatorService&#x27;) private hasUsernameValidatorService,
    private router: Router,
    private store: Store&lt;fromUser.State&gt;,
  ) {}

  req: ILoginRequest &#x3D; {
    username: &#x27;&#x27;,
    password: &#x27;&#x27;,
    code: &#x27;&#x27;,
  };

  ngOnInit(): void {
    this.validateForm &#x3D; this.fb.group({
      // username: [null, [Validators.required]],
      // username: [null, [Validators.required, this.hasUsernameValidator]],
      password: [null, [Validators.required]],
      remember: [true],
      username: new FormControl(null, {
        validators: [Validators.required],
        asyncValidators: [this.hasUsernameValidatorService.validate.bind(this.hasUsernameValidatorService)],
        updateOn: &#x27;blur&#x27;,
      }),
      code: [null, [Validators.required]],
    });

    this.addListen();
  }

  debounce(fn, time &#x3D; 1000) {
    if (this.timer) {
      clearTimeout(this.timer);
    }
    this.timer &#x3D; setTimeout(() &#x3D;&gt; {
      fn();
      clearTimeout(this.timer);
    }, time);
  }

  ngDoCheck() {}

  addListen() {}

  async onLogin() {
    this.req.username &#x3D; this.validateForm.controls.username.value;
    this.req.password &#x3D; this.validateForm.controls.password.value;
    this.req.code &#x3D; this.validateForm.controls.code.value;
    this.store.dispatch(new UserActions.Login({ req: this.req }));
  }
}
</code></pre>
    </div>

    <div class="tab-pane fade " id="c-templateData">
        <pre class="line-numbers"><code class="language-html">&lt;mat-card class&#x3D;&quot;panel-login&quot;&gt;
  &lt;form [formGroup]&#x3D;&quot;validateForm&quot; (ngSubmit)&#x3D;&quot;onLogin()&quot;&gt;
    &lt;div class&#x3D;&quot;i&quot;&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput #email type&#x3D;&quot;text&quot; formControlName&#x3D;&quot;username&quot; placeholder&#x3D;&quot;Username&quot;&gt;
        &lt;mat-error *ngIf&#x3D;&quot;validateForm.controls.username.hasError(&#x27;required&#x27;)&quot;&gt;
          Please enter a valid email address
        &lt;/mat-error&gt;
        &lt;mat-error *ngIf&#x3D;&quot;validateForm.controls.username.hasError(&#x27;has&#x27;)&quot;&gt;
          user name has not exist
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
    &lt;div class&#x3D;&quot;i&quot;&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput formControlName&#x3D;&quot;password&quot; placeholder&#x3D;&quot;Password&quot; [type]&#x3D;&quot;hide ? &#x27;password&#x27; : &#x27;text&#x27;&quot;&gt;
        &lt;mat-icon matSuffix (click)&#x3D;&quot;hide &#x3D; !hide&quot;&gt;{{hide ? &#x27;visibility&#x27; : &#x27;visibility_off&#x27;}}&lt;/mat-icon&gt;
        &lt;mat-error *ngIf&#x3D;&quot;validateForm.controls.password.hasError(&#x27;required&#x27;)&quot;&gt;
          请输入密码
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
    &lt;div class&#x3D;&quot;i code&quot;&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput formControlName&#x3D;&quot;code&quot; placeholder&#x3D;&quot;请输入验证码&quot;&gt;
        &lt;mat-error *ngIf&#x3D;&quot;validateForm.controls.code.hasError(&#x27;required&#x27;)&quot;&gt;
          验证码不正确
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;button type&#x3D;&quot;button&quot; mat-button appCode [aim]&#x3D;&#x27;validateForm.controls.username.value&#x27;&gt;获取验证码&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class&#x3D;&quot;i enroll df jcsb&quot;&gt;
      &lt;mat-slide-toggle&gt;记住密码&lt;/mat-slide-toggle&gt;
      &lt;a class&#x3D;&quot;login-form-forgot&quot;&gt;忘记密码 | &lt;a [routerLink]&#x3D;&quot;[&#x27;/u/enroll&#x27;]&quot;&gt;去注册!&lt;/a&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class&#x3D;&quot;i login&quot;&gt;
      &lt;button mat-button [disabled]&#x3D;&quot;!validateForm.valid&quot;&gt;登陆&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
&lt;/mat-card&gt;</code></pre>
    </div>

    <div class="tab-pane fade " id="c-tree">
        <div id="tree-container"></div>
        <div class="tree-legend">
            <div class="title">
                <b>Legend</b>
            </div>
            <div>
                <div class="color htmlelement"></div><span>Html element</span>
            </div>
            <div>
                <div class="color component"></div><span>Component</span>
            </div>
            <div>
                <div class="color directive"></div><span>Html element with directive</span>
            </div>
        </div>
    </div>

    
</div>

<script src="../js/libs/vis.min.js"></script>
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
        var COMPONENT_TEMPLATE = '<div><mat-card class="panel-login">  <form [formGroup]="validateForm" (ngSubmit)="onLogin()">    <div class="i">      <mat-form-field>        <input matInput #email type="text" formControlName="username" placeholder="Username">        <mat-error *ngIf="validateForm.controls.username.hasError(\'required\')">          Please enter a valid email address        </mat-error>        <mat-error *ngIf="validateForm.controls.username.hasError(\'has\')">          user name has not exist        </mat-error>      </mat-form-field>    </div>    <div class="i">      <mat-form-field>        <input matInput formControlName="password" placeholder="Password" [type]="hide ? \'password\' : \'text\'">        <mat-icon matSuffix (click)="hide = !hide">{{hide ? \'visibility\' : \'visibility_off\'}}</mat-icon>        <mat-error *ngIf="validateForm.controls.password.hasError(\'required\')">          请输入密码        </mat-error>      </mat-form-field>    </div>    <div class="i code">      <mat-form-field>        <input matInput formControlName="code" placeholder="请输入验证码">        <mat-error *ngIf="validateForm.controls.code.hasError(\'required\')">          验证码不正确        </mat-error>      </mat-form-field>      <button type="button" mat-button appCode [aim]=\'validateForm.controls.username.value\'>获取验证码</button>    </div>    <div class="i enroll df jcsb">      <mat-slide-toggle>记住密码</mat-slide-toggle>      <a class="login-form-forgot">忘记密码 | <a [routerLink]="[\'/u/enroll\']">去注册!</a></a>    </div>    <div class="i login">      <button mat-button [disabled]="!validateForm.valid">登陆</button>    </div>  </form></mat-card></div>'
    var COMPONENTS = [{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'BComponent', 'selector': 'app-b'},{'name': 'CComponent', 'selector': 'app-c'},{'name': 'ChangeEmailComponent', 'selector': 'app-change-email'},{'name': 'ChangePasswordComponent', 'selector': 'app-change-password'},{'name': 'ChangePhoneComponent', 'selector': 'app-change-phone'},{'name': 'EnrollComponent', 'selector': 'app-enroll'},{'name': 'FileComponent', 'selector': 'app-file'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'GoodComponent', 'selector': 'app-good'},{'name': 'HeaderComponent', 'selector': 'app-header'},{'name': 'HomeComponent', 'selector': 'app-home'},{'name': 'LineComponent', 'selector': 'app-line'},{'name': 'LoginComponent', 'selector': 'app-login'},{'name': 'MyComponent', 'selector': 'app-my'},{'name': 'MyComponent', 'selector': 'app-my'},{'name': 'SelectAreaComponent', 'selector': 'app-select-area'},{'name': 'SelectAreaRangeComponent', 'selector': 'app-select-area-range'},{'name': 'SelectGoodTypeComponent', 'selector': 'app-select-good-type'},{'name': 'SelectPosComponent', 'selector': 'app-select-pos'},{'name': 'SideComponent', 'selector': 'app-side'},{'name': 'UserHeaderComponent', 'selector': 'app-user-header'},{'name': 'XlsxComponent', 'selector': 'app-xlsx'}];
    var DIRECTIVES = [{'name': 'CodeDirective', 'selector': '[appCode]'}];
    var ACTUAL_COMPONENT = {'name': 'LoginComponent'};
</script>
<script src="../js/tree.js"></script>














                   </div><div class="search-results">
    <div class="has-results">
        <h1 class="search-results-title"><span class='search-results-count'></span> result-matching "<span class='search-query'></span>"</h1>
        <ul class="search-results-list"></ul>
    </div>
    <div class="no-results">
        <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
    </div>
</div>
</div>
               <!-- END CONTENT -->
           </div>
       </div>

       <script>
            var COMPODOC_CURRENT_PAGE_DEPTH = 1;
            var COMPODOC_CURRENT_PAGE_CONTEXT = 'component';
            var COMPODOC_CURRENT_PAGE_URL = 'LoginComponent.html';
       </script>

       <script src="../js/libs/custom-elements.min.js"></script>
       <script src="../js/libs/lit-html.js"></script>
       <script src="../js/menu-wc.js"></script>

       <script src="../js/libs/bootstrap-native.js"></script>

       <script src="../js/libs/es6-shim.min.js"></script>
       <script src="../js/libs/EventDispatcher.js"></script>
       <script src="../js/libs/promise.min.js"></script>
       <script src="../js/libs/zepto.min.js"></script>

       <script src="../js/compodoc.js"></script>

       <script src="../js/tabs.js"></script>
       <script src="../js/menu.js"></script>
       <script src="../js/libs/clipboard.min.js"></script>
       <script src="../js/libs/prism.js"></script>
       <script src="../js/sourceCode.js"></script>
          <script src="../js/search/search.js"></script>
          <script src="../js/search/lunr.min.js"></script>
          <script src="../js/search/search-lunr.js"></script>
          <script src="../js/search/search_index.js"></script>
       <script src="../js/lazy-load-graphs.js"></script>


    </body>
</html>
